<template>
    <el-row class="padd20 bgf main-cont">
        <el-col class="mb20">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/ldkc_jyzz' }">劳动课程</el-breadcrumb-item>
                <el-breadcrumb-item>{{tip}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col class="btn posa">
            <el-col class="padd20">
                <el-form ref="lineForm" :rules="rules" :model="lineForm" label-width="80px" class="reset-form" style="display: flex;">
                    <el-col style="width: 50%;">
                        <el-col class="tl mb20">
                            <div class="title">
                                基本信息
                            </div>
                        </el-col>
                        <el-col>
                            <el-form-item label="课程名称" prop="name">
                                <el-input v-model="lineForm.name" class="text" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="出版社" prop="material">
                                <el-input v-model="lineForm.material" class="text" placeholder="请输入教材出版社"></el-input>
                            </el-form-item>
                            <el-form-item label="课程封面" prop="img" ref="image">
                                <el-upload class="avatar-uploader" :action="uploadfileurl" :show-file-list="false"
                                    :on-progress="progress" :on-success="success" :before-upload="beforeUpload" accept="image/jpeg,image/jpg,image/png,">
                                    <img v-if="lineForm.img" :src="lineForm.img" class="avatar">
                                    <div v-else class="upload-icon">
                                        <i class="el-icon-upload"></i>
                                        <div>上传</div>
                                    </div>
                                </el-upload>
                                <el-progress v-if="showProgress" :percentage="progInt"></el-progress>
                            </el-form-item>
                            <el-form-item label="教学目标" prop="target">
                                <el-input type="textarea" placeholder="填写教学目标" v-model="lineForm.target"></el-input>
                            </el-form-item>
                            <el-form-item label="课程主编" prop="zbname">
                                <el-input v-model="lineForm.zbname" class="text" placeholder="请输入课程主编,名称之间空格隔开"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col style="width: 60%; margin:0 0 0 100px;">
                        <el-col class="tl mt20 mb20">
                            <div class="title">
                                课程展示
                            </div>
                        </el-col>
                        <el-col>
                            <el-form-item label="详情界面">
                                <div id="demo1"></div>
                            </el-form-item>
                            <el-form-item style="position: absolute;right: 50px;margin-top: 80px;">
                                <el-button class="reset-cancel-btn" @click="handleClose('lineForm')">返 回</el-button>
                                <el-button class="reset-comfirm-btn" @click="onSubmit('lineForm')">保 存</el-button>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-form>
            </el-col>
        </el-col>
    </el-row>
</template>

<script>
    import {
        httpAction
    } from '@/http/axios.js'
    import E from 'wangeditor';
    export default {
        data() {
            return {
                editor: null,
                tip: "创建劳动课程",
                loginInfo: this.$store.state.loginInfo,
                jyzid: this.$store.state.jyzid,
                lineForm: {
                    id: '',
                    name: '',
                    material: '',
                    img: '',
                    target: '',
                    zbname: '',
                    info: ''
                },
                cousid: 0,
                rules: {
                    name: [{
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }],
                    material: [{
                        required: true,
                        message: '请输入教材出版社',
                        trigger: 'blur'
                    }],
                    img: [{
                        required: true,
                        message: '请上传封面',
                        trigger: 'change'
                    }],
                    zbname: [{
                        required: true,
                        message: '请填写课程主编',
                        trigger: 'blur'
                    }]
                },
                showProgress: false,
                progInt: 0,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                editorData:'',
                schoolid:this.$store.state.schoolId,
            };
        },
        computed: {
            isEdit() {
                return this.$route.meta.isEdit //根据meta判断
            }
        },
        created() {
            if (this.isEdit) {
                this.tip = "编辑劳动课程"
                this.cousid = localStorage.getItem('kcId');
                this.getEditData();
            } else {
                this.tip = "创建劳动课程"
            }
        },
        mounted() {
            this.seteditor()
        },
        methods: {
            //获取编辑数据
            getEditData() {
                this.$api.jyz.cousInfo({
                    'cousid': this.cousid
                }).then(res => {
                    if (res.code == '0') {
                        this.lineForm.id = res.data.id;
                        this.lineForm.name = res.data.name;
                        this.lineForm.img = res.data.image;
                        this.lineForm.material = res.data.material;
                        this.lineForm.target = res.data.target;
                        this.lineForm.info = this.editor.txt.html(res.data.info);
                        this.lineForm.zbname = res.data.chiefEditor;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleClose(formName) {
                this.$router.go(-1)
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var parms = {
                            id: this.lineForm.id,
                            schoolId: '',
                            jyzId: '',
                            name: this.lineForm.name,
                            image: this.lineForm.img,
                            info: this.editor.txt.html(),
                            target: this.lineForm.target,
                            createUser: this.loginInfo.user.id,
                            material: this.lineForm.material,
                            chiefEditor: this.lineForm.zbname,
                        };
                        this.$api.jyz.addLdCous(parms).then(res => {
                            if (res.code == '0') {
                                this.$router.go(-1)
                                this.$message.success('操作成功！');
                            } else {
                                this.$message.error('操作失败！');
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            progress(event) {
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                this.showProgress = false;
                this.lineForm.img = response.body.data.url;
                this.$refs['image'].clearValidate()
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png", "gif", "jpeg"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('封面格式暂不支持！');
                    return false;
                }
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 50) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过50M`)
                    return false
                }
            },
            seteditor() {
                const editor = new E(`#demo1`)
                // 配置 onchange 回调函数，将数据同步到 vue 中
                editor.config.onchange = (newHtml) => {
                    this.editorData = newHtml
                }
                editor.config.uploadImgShowBase64 = true; // base 64 存储图片

                // this.editor.customConfig.uploadImgServer =
                //   ""; // 配置服务器端地址
                // this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
                // this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
                // this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
                // this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
                // this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间

                // 配置菜单
                editor.config.excludeMenus = [
                	"quote", // 引用
                	"emoticon", // 表情
                	"table", // 表格
                	"video", // 插入视频
                	"code", // 插入代码
                	"redo", // 重复
                ];
                // 创建编辑器
                editor.create()
                this.editor = editor
            }
        },
        beforeDestroy() {
            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy()
            this.editor = null
        }
    };
</script>

<style scoped lang="scss">
.main-cont {
    height: 100%;
    overflow-y: auto;
}
    .upload-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 110px;
        line-height: 110px;
        color: #6872ff;
        font-size: 30px;
        border-radius: 10px;
        border: .1px #e7ebf0 solid;

        div {
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            color: #a7abb1;

        }

        &:hover {
            color: #626BF1;

            div {
                color: #626BF1;
            }
        }
    }


    .avatar {
        width: 110px;
        height: 110px;
    }

    .bgf {
        background-color: #fff;

    }
    .title{
        font-size: 18px;
        color: #000;
        font-weight: bold;
    }
</style>
